<template>
  <div>
    <!-- 头部导航 -->
    <view>
      <u-tabs :list="list" :is-scroll="false" :current="current" bar-width="100" active-color="#30B1B7" @change="change"></u-tabs>
    </view>

    <view>
      <view v-if="current == 0">
        <view class="order-box" v-for="(item, i) in orderList" :key="i">
          <view class="order-num">订单号：{{ item.num }}</view>
          <view class="product-info-box">
            <img src="../../static/dengzi.png" class="product-img" alt="" />
            <view class="product-info">
              <view class="product-name">{{ item.name }}</view>
              <view class="product-address">{{ item.fadd }}</view>
              <view class="num">数量: {{ item.amount }}</view>
            </view>
          </view>
          <view class="flex ali-cen flex-between">
            <view class="money"
              >金额: <text>￥{{ item.money }}</text></view
            >
            <view class="btn" @click="detail">立即抢单</view>
          </view>
        </view>
      </view>
      <view v-if="current == 1">
        <!-- <view class="order-box" v-for="item in orderList">
          <view class="order-num">订单号：{{ item.num }}</view>
          <view class="product-info-box">
            <img src="" class="product-img" alt="" />
            <view class="product-info">
              <view class="product-name">{{ item.name }}</view>
              <view class="product-address">{{ item.fadd }}</view>
              <view class="num">数量: {{ item.amount }}</view>
            </view>
          </view>
          <view class="flex ali-cen flex-between">
            <view class="money"
              >金额: <text>￥{{ item.money }}</text></view
            >
            <view class="btn" @click="detail">立即抢单</view>
          </view>
        </view> -->
      </view>
      <view v-if="current == 2">2</view>
      <view v-if="current == 3">3</view>
    </view>
  </div>
</template>

<script>
  import { getOrder } from '@/api/order.js'
  export default {
    data() {
      return {
        list: [
          {
            name: '一口价订单',
          },
          {
            name: '保证金专区',
          },
          {
            name: '报价订单',
          },
          {
            name: '指派订单',
          },
        ],
        current: 0,
        query: {
          currentPage: 1,
          pageSize: 10,
          username: '1',
        },
        orderList: [],
      }
    },
    created() {
      var username = window.localStorage.getItem('username')
      // this.query.username = username;
      this.query.username = 'admin'
      this.fetchData()
    },
    methods: {
      change(index) {
        this.current = index.index
        //如报错则用this.current = index代替上行
      },
      async fetchData() {
        const res = await getOrder(this.query)
        console.log(res)
        this.orderList = res.data.orders
      },
      detail() {
        uni.navigateTo({
          url: '/pages/order_detail/order_detail',
        })
      },
    },
  }
</script>

<style lang="scss">
  .order-box {
    padding: 18rpx 20rpx;
    color: rgb(160, 160, 160);
    font-size: 14rpx;
    background-color: rgb(240, 240, 240);
    margin-bottom: 20rpx;
  }
  .order-num {
    text-align: right;
  }
  .product-img {
    width: 140rpx;
    height: 140rpx;
    border-radius: 10rpx;
    overflow: hidden;
    margin-right: 20rpx;
  }
  .product-info-box {
    display: flex;
    margin-bottom: 18rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid rgb(225, 225, 225);
  }
  .product-info {
    flex: 1;
    height: 110rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .product-name {
    font-size: 18rpx;
    color: #000;
    font-weight: bold;
  }
  .flex {
    display: flex;
  }
  .flex-between {
    display: flex;
    justify-content: space-between;
  }
  .money text {
    color: #ee0400;
    font-size: 16rpx;
    font-weight: bold;
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 40rpx;
    width: 140rpx;
    height: 56rpx;
    background-color: #ee0400;
  }
  .ali-cen {
    align-items: center;
  }
</style>
